<template>
	<div>
		<nav class="sticky-top">
			智慧商城
		</nav>
		<van-search class="search" @click="$router.push('/search')" placeholder="请输入搜索关键词" />
		<van-swipe class="carousel" :autoplay="1000">
			<van-swipe-item v-for="(image, index) in carousel" :key="index">
				<img v-lazy="image.imgUrl" />
			</van-swipe-item>
		</van-swipe>
		<van-notice-bar left-icon="volume-o" text="智慧商城2.0全新上线，更多新品等你来选哦~~~~~~~~~~" color="white"
			background="#7e7e7e" />
			
		<div class="row row-cols-5">
			<div class="col goods p-0" v-for="items,index in navbarList" @click="$router.push('/class')" :key="index">
				<img :src="items.imgUrl" class="d-block mx-auto" alt="">
				{{items.text}}
			</div>
		</div>
		
		<img :src="show" class="d-block vw-100 my-3" alt="">
		
		<div class="bg-light mb-5">
			<h6 class="text-center" style="font-weight: 100;">
				—— 猜你喜欢 ——
			</h6>
			<goods v-for="items in goods" :key="items.goods_id" :data="items"></goods>
		</div>
	</div>
</template>

<script>
	import {
		homeIndex
	} from '@/api/home'
	import goods from '@/components/goods'
	export default {
		name: 'AppHome',
		data: () => {
			return {
				title: '智慧商城',
				carousel: '',
				navbarList:'',
				show:'',
				goods:''
			}
		},
		async created() {
			const {
				data: {
					pageData: {
						items
					}
				}
			} = await homeIndex()
			console.log(items);
			this.carousel = items[1].data
			this.navbarList = items[3].data
			this.show = items[4].data[0].imgUrl
			this.goods = items[6].data
		},
		components:{
			goods
		}
	}
</script>

<style scoped lang="less">
	@import url('../../style/bootstrap.css');
	nav {
		background-color: #c21401;
		color: white;
		font-weight: bold;
		padding: 10px;
		text-align: center;
		width: 100vw;
		position: sticky;

		
	}

	.carousel img {
		width: 100vw;
	}
	
	.goods{
		img{
			width: 60px;
			height: 60px;
		}
		font-size: 17px;
	}
</style>